<template>
    <s-layout>
        <view class="edit-activity-container">
            <!-- 顶部标题栏 -->
            <view class="edit-header">
                <text class="edit-title">创建活动</text>
                <text class="edit-subtitle">{{ type === 'book' ? '读书会' : type === 'movie' ? '影视鉴赏' : '主题沙龙' }}</text>
            </view>

            <!-- Tab 切换栏 -->
            <view class="edit-tabs">
                <view class="edit-tab-item" :class="{ 'active': currentTab === 0 }" @tap="currentTab = 0">
                    <uni-icons class="tab-icon" type="list" size="20"></uni-icons>
                    <text>基本信息</text>
                </view>
                <view class="edit-tab-item" :class="{ 'active': currentTab === 1 }" @tap="currentTab = 1">
                    <uni-icons class="tab-icon" type="file-text" size="20"></uni-icons>
                    <text>活动详情</text>
                </view>
                <view class="edit-tab-item" :class="{ 'active': currentTab === 2 }" @tap="currentTab = 2">
                    <uni-icons class="tab-icon" type="chatbubble" size="20"></uni-icons>
                    <text>讨论与联系</text>
                </view>
            </view>

            <!-- 表单内容区 -->
            <scroll-view scroll-y class="edit-content-scroll">
                <!-- Tab 1: 基本信息 -->
                <view v-show="currentTab === 0" class="tab-content-wrapper">
                    <view class="edit-section">
                        <!-- 活动名称 -->
                        <view class="edit-form-item">
                            <text class="edit-form-label">活动名称</text>
                            <view class="edit-input-wrapper">
                                <uni-icons type="pricetag" size="20" color="#909399"
                                    class="edit-input-icon"></uni-icons>
                                <uni-easyinput type="text" class="edit-input" placeholder="为您的活动取个响亮的名称 (限30字)"
                                    v-model="activityTitle" maxlength="30" />
                            </view>
                        </view>

                        <!-- 活动时间 -->
                        <view class="edit-form-item">
                            <text class="edit-form-label">开始时间</text>
                            <view class="edit-input-wrapper">
                                <uni-icons type="calendar" size="20" color="#909399"
                                    class="edit-input-icon"></uni-icons>
                                <uni-datetime-picker type="datetime" v-model="activityTime" :clear-icon="false"
                                    class="edit-datetime" placeholder="请选择日期和时间" />
                            </view>
                        </view>

                        <!-- 活动封面 -->
                        <view class="edit-form-item">
                            <text class="edit-form-label">封面图片</text>
                            <uni-file-picker v-model="coverImage" fileMediatype="image" :limit="1"
                                :sizeType="['compressed']" @select="handleCoverImageSelect"
                                @delete="handleCoverImageDelete"
                                :imageStyles="{ width: '100%', height: '350rpx', borderRadius: '16rpx', objectFit: 'cover' }"
                                class="edit-image-picker">
                                <template #default>
                                    <view class="edit-upload-placeholder">
                                        <uni-icons type="cloud-upload" size="40" color="#c0c4cc"></uni-icons>
                                        <text class="upload-text">点击上传活动封面</text>
                                        <text class="upload-hint">建议使用横版图片，2MB以内</text>
                                    </view>
                                </template>
                            </uni-file-picker>
                        </view>

                        <!-- 签到设置 -->
                        <view class="edit-form-item">
                            <text class="edit-form-label">签到设置</text>
                            <view class="edit-switch-tabs">
                                <view class="edit-tab" :class="{ 'active': signType === '0' }"
                                    @tap="toggleSignType('0')">
                                    <text>非签到活动</text>
                                </view>
                                <view class="edit-tab" :class="{ 'active': signType === '1' }"
                                    @tap="toggleSignType('1')">
                                    <text>签到活动</text>
                                </view>
                            </view>
                            <text class="edit-form-tip">签到活动需提前报名，并在活动开始后3天内完成签到</text>
                        </view>

                        <!-- 活动人数 -->
                        <view class="edit-form-item">
                            <text class="edit-form-label">人数上限</text>
                            <view class="edit-counter">
                                <view class="counter-btn" @tap="changePeople(-1)">
                                    <uni-icons type="minus" size="20" color="#606266"></uni-icons>
                                </view>
                                <view class="counter-value">{{ peopleNum }}</view>
                                <view class="counter-btn" @tap="changePeople(1)">
                                    <uni-icons type="plus" size="20" color="#606266"></uni-icons>
                                </view>
                            </view>
                            <text class="edit-form-tip">活动报名人数上限，最多13人</text>
                        </view>
                    </view>
                </view>

                <!-- Tab 2: 活动详情 -->
                <view v-show="currentTab === 1" class="tab-content-wrapper">
                    <view class="edit-section">
                        <!-- 活动类型 (书籍讨论) -->
                        <view class="edit-form-item" v-if="type === 'book'">
                            <text class="edit-form-label">书籍类型</text>
                            <view class="edit-tag-group">
                                <view v-for="(item, index) in bookTypeOptions" :key="index" class="edit-tag"
                                    :class="{ 'active': bookType === item.value }" @tap="toggleBookType(item.value)">
                                    {{ item.label }}
                                </view>
                            </view>
                        </view>

                        <!-- 活动子类型 (影视/话题) -->
                        <view class="edit-form-item" v-if="type === 'movie' || type === 'topic'">
                            <text class="edit-form-label">{{ type === 'movie' ? '影视子类型' : '话题子类型' }}</text>
                            <view class="edit-tag-group">
                                <view v-for="(item, index) in currentSubTypeOptions" :key="index" class="edit-tag"
                                    :class="{ 'active': activitySubType === item.value }"
                                    @tap="toggleActivitySubType(item.value)">
                                    {{ item.label }}
                                </view>
                            </view>
                        </view>

                        <!-- 城市选择 (线下) -->
                        <view v-if="mode === 'offline'" class="edit-form-item">
                            <text class="edit-form-label">活动城市</text>
                            <view class="edit-input-wrapper">
                                <uni-icons type="location" size="20" color="#909399"
                                    class="edit-input-icon"></uni-icons>
                                <uni-easyinput type="text" class="edit-input" placeholder="请输入活动举办城市" v-model="city" />
                            </view>
                        </view>

                        <!-- 地图导航 (线下) -->
                        <view v-if="mode === 'offline'" class="edit-form-item">
                            <text class="edit-form-label">导航位置</text>
                            <view class="edit-input-wrapper">
                                <uni-icons type="navigate" size="20" color="#909399"
                                    class="edit-input-icon"></uni-icons>
                                <uni-easyinput type="text" class="edit-input" placeholder="输入详细地址以便地图导航"
                                    v-model="address" />
                            </view>
                        </view>

                        <!-- 现场地址 (线下) -->
                        <view v-if="mode === 'offline'" class="edit-form-item">
                            <text class="edit-form-label">详细地址</text>
                            <view class="edit-input-wrapper">
                                <uni-icons type="map-pin" size="20" color="#909399" class="edit-input-icon"></uni-icons>
                                <uni-easyinput type="text" class="edit-input" placeholder="活动页面显示的具体位置 (限30字)"
                                    v-model="displayAddress" maxlength="30" />
                            </view>
                        </view>

                        <!-- 活动平台 (线上) -->
                        <view v-if="mode === 'online'" class="edit-form-item">
                            <text class="edit-form-label">线上平台</text>
                            <view class="edit-input-wrapper">
                                <uni-icons type="cloud-upload" size="20" color="#909399"
                                    class="edit-input-icon"></uni-icons>
                                <uni-easyinput type="text" class="edit-input" placeholder="例如：腾讯会议、Zoom、钉钉等"
                                    v-model="platform" />
                            </view>
                        </view>

                        <!-- 活动简介 -->
                        <view class="edit-form-item">
                            <text class="edit-form-label">活动简介</text>
                            <view class="edit-textarea-wrapper">
                                <uni-easyinput type="textarea" autoHeight class="edit-textarea"
                                    placeholder="详细介绍活动内容、流程、亮点等 (限1000字)" v-model="activityDescription"
                                    maxlength="1000" />
                            </view>
                        </view>

                        <!-- 推荐语备注 -->
                        <view class="edit-form-item">
                            <text class="edit-form-label">推荐语/备注</text>
                            <view class="edit-textarea-wrapper">
                                <uni-easyinput type="textarea" autoHeight class="edit-textarea"
                                    placeholder="分享您的发起初衷、活动要求或其他补充信息 (限1000字)" v-model="recommendationNotes"
                                    maxlength="1000" />
                            </view>
                        </view>
                    </view>
                </view>

                <!-- Tab 3: 讨论与联系 -->
                <view v-show="currentTab === 2" class="tab-content-wrapper">
                    <!-- 分组：讨论问题 -->
                    <view class="edit-section">
                        <view class="edit-section-title">
                            <uni-icons type="help" size="20" color="#303133" class="edit-section-icon"></uni-icons>
                            <text>讨论问题</text>
                        </view>

                        <view v-for="(question, index) in discussQuestions" :key="index" class="edit-form-item">
                            <text class="edit-form-label">问题 {{ index + 1 }}</text>
                            <view class="edit-textarea-wrapper">
                                <uni-easyinput type="textarea" autoHeight class="edit-textarea"
                                    :placeholder="'输入引导讨论的问题 (限100字)'" v-model="discussQuestions[index]"
                                    maxlength="100" />
                            </view>
                        </view>
                    </view>

                    <!-- 分组：联系方式 -->
                    <view class="edit-section">
                        <view class="edit-section-title">
                            <uni-icons type="paperclip" size="20" color="#303133" class="edit-section-icon"></uni-icons>
                            <text>联系方式</text>
                        </view>

                        <!-- 活动群二维码 -->
                        <view class="edit-form-item">
                            <text class="edit-form-label">活动群二维码</text>
                            <view class="edit-qrcode-container">
                                <uni-file-picker v-model="groupQrcode" fileMediatype="image" :limit="1"
                                    :sizeType="['compressed']" @select="handleGroupQrcodeSelect"
                                    @delete="handleGroupQrcodeDelete"
                                    :imageStyles="{ width: '200rpx', height: '200rpx', borderRadius: '12rpx' }"
                                    class="edit-qrcode-picker">
                                    <template #default>
                                        <view class="edit-qrcode-placeholder">
                                            <uni-icons type="plus" size="40" color="#c0c4cc"></uni-icons>
                                            <text class="qrcode-text">上传群聊码</text>
                                        </view>
                                    </template>
                                </uni-file-picker>
                                <text class="edit-form-tip">建议上传微信群二维码，图片大小2MB以内</text>
                            </view>
                        </view>

                        <!-- 发起人个人微信二维码 -->
                        <view class="edit-form-item">
                            <text class="edit-form-label">个人二维码</text>
                            <view class="edit-qrcode-container">
                                <uni-file-picker v-model="personQrcode" fileMediatype="image" :limit="1"
                                    :sizeType="['compressed']" @select="handlePersonQrcodeSelect"
                                    @delete="handlePersonQrcodeDelete"
                                    :imageStyles="{ width: '200rpx', height: '200rpx', borderRadius: '12rpx' }"
                                    class="edit-qrcode-picker">
                                    <template #default>
                                        <view class="edit-qrcode-placeholder">
                                            <uni-icons type="plus" size="40" color="#c0c4cc"></uni-icons>
                                            <text class="qrcode-text">上传个人码</text>
                                        </view>
                                    </template>
                                </uni-file-picker>
                                <text class="edit-form-tip">用于群二维码失效时的备用联系方式</text>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 底部留白区域 -->
                <view class="edit-bottom-space"></view>
            </scroll-view>

            <!-- 底部操作栏 -->
            <view class="edit-action-bar">
                <button class="edit-btn draft-btn" @tap="saveDraftManually">
                    <uni-icons type="download" size="20" :color="primaryDarkColor"></uni-icons>
                    <text>存为草稿</text>
                </button>
                <button class="edit-btn publish-btn" @tap="publishActivity">
                    <text>确认发布</text>
                    <uni-icons type="paperplane" size="20" color="#fff" class="btn-icon"></uni-icons>
                </button>
            </view>
        </view>
    </s-layout>
</template>

<script setup>
import { ref, onMounted, reactive, watch, computed } from 'vue';
import { onLoad, onUnload, onBackPress } from '@dcloudio/uni-app';

let currentTab = ref(0);
let activityTime = ref('');
let coverImage = ref([]);
let groupQrcode = ref([]);
let personQrcode = ref([]);
let peopleNum = ref(1);
let type = ref('');
let mode = ref('');
let typeIndex = ref(null);
let modeIndex = ref(null);
let city = ref('');
let address = ref(''); // 用于地图导航
let displayAddress = ref(''); // 用于活动页面显示
let platform = ref('');
let bookType = ref('0');
let activitySubType = ref('0');
let discussQuestions = ref(['', '', '']);
let signType = ref('0');
let activityTitle = ref('');
let activityDescription = ref(''); // 活动简介
let recommendationNotes = ref(''); // 推荐语备注
const primaryDarkColor = ref('#E15656'); // 在JS中定义颜色变量，以便模板使用

// 处理封面图片选择
function handleCoverImageSelect(e) {
    if (e.tempFiles && e.tempFiles.length > 0) {
        coverImage.value = e.tempFiles;
    } else if (e.tempFilePaths && e.tempFilePaths.length > 0) { // 兼容旧版API或某些情况下的返回格式
        coverImage.value = e.tempFilePaths.map(path => ({ url: path, name: 'cover_image' }));
    }
}

// 处理封面图片删除
function handleCoverImageDelete(e) {
    // uni-file-picker 的删除事件通常会直接更新 v-model
    // 但如果需要显式处理，可以这样清空
    // 找到被删除的文件并从 coverImage.value 中移除
    // 由于 limit=1，直接清空即可
    coverImage.value = [];
}

// 处理群二维码图片选择
function handleGroupQrcodeSelect(e) {
    if (e.tempFiles && e.tempFiles.length > 0) {
        groupQrcode.value = e.tempFiles;
    } else if (e.tempFilePaths && e.tempFilePaths.length > 0) {
        groupQrcode.value = e.tempFilePaths.map(path => ({ url: path, name: 'group_qr' }));
    }
}

// 处理群二维码图片删除
function handleGroupQrcodeDelete() {
    groupQrcode.value = [];
}

// 处理个人二维码图片选择
function handlePersonQrcodeSelect(e) {
    if (e.tempFiles && e.tempFiles.length > 0) {
        personQrcode.value = e.tempFiles;
    } else if (e.tempFilePaths && e.tempFilePaths.length > 0) {
        personQrcode.value = e.tempFilePaths.map(path => ({ url: path, name: 'person_qr' }));
    }
}

// 处理个人二维码图片删除
function handlePersonQrcodeDelete() {
    personQrcode.value = [];
}

let draftId = null;
let draft = null;

const bookTypeOptions = ref([
    { label: '社科类', value: '0' },
    { label: '文学类', value: '1' },
    { label: '传记类', value: '2' },
    { label: '历史类', value: '3' },
    { label: '主题书会', value: '4' },
]);

const movieSubTypeOptions = ref([
    { label: '影视研讨', value: '0' },
    { label: '理论分享', value: '1' },
    { label: '创作解析', value: '2' },
]);

const topicSubTypeOptions = ref([
    { label: '话题讨论', value: '0' },
    { label: '行业分享', value: '1' },
    { label: '经验交流', value: '2' },
]);

const currentSubTypeOptions = computed(() => {
    if (type.value === 'movie') return movieSubTypeOptions.value;
    if (type.value === 'topic') return topicSubTypeOptions.value;
    return [];
});

function changePeople(val) {
    let n = peopleNum.value + val;
    if (n < 1) n = 1;
    if (n > 13) n = 13;
    peopleNum.value = n;
}

function setupMovieQuestions() {
    discussQuestions.value = [
        '你对影片的总体印象如何？哪些场景或角色给你留下了深刻印象？',
        '影片的叙事结构和表现手法有何特点？导演想要传达什么主题或观点？',
        '如果你是导演，你会对哪些部分进行调整或改进？为什么？'
    ];
}

function setupPageByType() {
    if (type.value === 'movie') {
        setupMovieQuestions();
    } else if (type.value === 'book') {
        discussQuestions.value = [
            '这本书的核心观点是什么？你有何感受或思考？',
            '书中哪些内容引起了你的共鸣或质疑？为什么？',
            '这本书的内容如何与现实生活联系？有什么启示？'
        ];
    } else if (type.value === 'topic') {
        discussQuestions.value = [
            '对于本次话题，你的主要观点是什么？',
            '这个话题有哪些不同角度的思考方式？',
            '对于这个话题，你有何行动建议或解决方案？'
        ];
    }
}

onLoad((query) => {
    type.value = query.type || '';
    mode.value = query.mode || '';
    typeIndex.value = query.typeIndex !== undefined ? parseInt(query.typeIndex) : null;
    modeIndex.value = query.modeIndex !== undefined ? parseInt(query.modeIndex) : null;

    if (query.draftId) {
        draftId = parseInt(query.draftId);
        loadDraftData(draftId);
    } else {
        setupPageByType();
    }
});

function getFormData() {
    return {
        id: draftId || new Date().getTime(),
        title: activityTitle.value || '',
        activityTime: activityTime.value || '',
        coverImage: coverImage.value.length > 0 ? (coverImage.value[0].url || coverImage.value[0].path || coverImage.value[0].tempFilePath) : '',
        type: type.value,
        typeIndex: typeIndex.value,
        mode: mode.value,
        modeIndex: modeIndex.value,
        city: city.value,
        address: address.value, // 地图导航地址
        displayAddress: displayAddress.value, // 显示地址
        platform: platform.value,
        peopleNum: peopleNum.value,
        bookType: bookType.value,
        activitySubType: activitySubType.value,
        signType: signType.value,
        discussQuestions: discussQuestions.value,
        groupQrcode: groupQrcode.value.length > 0 ? (groupQrcode.value[0].url || groupQrcode.value[0].path || groupQrcode.value[0].tempFilePath) : '',
        personQrcode: personQrcode.value.length > 0 ? (personQrcode.value[0].url || personQrcode.value[0].path || personQrcode.value[0].tempFilePath) : '',
        activityDescription: activityDescription.value, // 活动简介
        recommendationNotes: recommendationNotes.value, // 推荐语
        createdAt: draft ? draft.createdAt : new Date().toLocaleString(),
        lastModified: new Date().toLocaleString()
    };
}

function loadDraftData(id) {
    try {
        const drafts = uni.getStorageSync('activity_drafts') || [];
        if (Array.isArray(drafts)) {
            const foundDraft = drafts.find(item => item.id === id);
            if (foundDraft) {
                draft = foundDraft;
                activityTitle.value = foundDraft.title || '';
                activityTime.value = foundDraft.activityTime || '';
                type.value = foundDraft.type || '';
                mode.value = foundDraft.mode || '';
                typeIndex.value = foundDraft.typeIndex;
                modeIndex.value = foundDraft.modeIndex;
                city.value = foundDraft.city || '';
                address.value = foundDraft.address || '';
                displayAddress.value = foundDraft.displayAddress || '';
                platform.value = foundDraft.platform || '';
                peopleNum.value = foundDraft.peopleNum || 1;
                bookType.value = foundDraft.bookType || '0';
                activitySubType.value = foundDraft.activitySubType || '0';
                signType.value = foundDraft.signType || '0';
                activityDescription.value = foundDraft.activityDescription || '';
                recommendationNotes.value = foundDraft.recommendationNotes || '';

                if (foundDraft.coverImage) {
                    coverImage.value = [{ url: foundDraft.coverImage, name: 'cover.jpg' }];
                }
                if (foundDraft.groupQrcode) {
                    groupQrcode.value = [{ url: foundDraft.groupQrcode, name: 'group_qr.jpg' }];
                }
                if (foundDraft.personQrcode) {
                    personQrcode.value = [{ url: foundDraft.personQrcode, name: 'person_qr.jpg' }];
                }
                if (foundDraft.discussQuestions && foundDraft.discussQuestions.length === 3) {
                    discussQuestions.value = foundDraft.discussQuestions;
                } else {
                    setupPageByType(); // 如果问题数据不规范，则重新生成
                }
            }
        }
    } catch (e) {
        console.error('Failed to load draft:', e);
        uni.showToast({ title: '加载草稿失败', icon: 'none' });
    }
}

function saveDraft(showToast = true) {
    const currentDraftData = getFormData();
    try {
        let drafts = uni.getStorageSync('activity_drafts') || [];
        if (!Array.isArray(drafts)) drafts = [];
        const existingDraftIndex = drafts.findIndex(d => d.id === currentDraftData.id);

        if (existingDraftIndex > -1) {
            drafts[existingDraftIndex] = currentDraftData;
        } else {
            drafts.push(currentDraftData);
        }
        uni.setStorageSync('activity_drafts', drafts);
        if (showToast) {
            uni.showToast({ title: '草稿已保存', icon: 'success' });
        }
        draftId = currentDraftData.id; // 更新当前草稿ID
        draft = currentDraftData; // 更新当前草稿对象
    } catch (e) {
        console.error('Failed to save draft:', e);
        if (showToast) {
            uni.showToast({ title: '保存草稿失败', icon: 'none' });
        }
    }
}

function saveDraftManually() {
    saveDraft(true);
}

function saveDraftAndGoBack() {
    saveDraft(false); // 静默保存
    uni.navigateBack();
}

function publishActivity() {
    const formData = getFormData();
    // 校验逻辑 (示例)
    if (!formData.activityTime || !formData.title || !formData.activityDescription) {
        uni.showToast({ title: '请填写所有必填项', icon: 'none' });
        return;
    }
    console.log('Publishing activity:', formData);
    // TODO: 实现发布逻辑，例如API调用
    uni.showLoading({ title: '发布中...' });
    setTimeout(() => {
        uni.hideLoading();
        uni.showToast({ title: '活动发布成功 (模拟)', icon: 'success' });
        // 发布成功后，可以考虑删除草稿
        if (draftId) {
            try {
                let drafts = uni.getStorageSync('activity_drafts') || [];
                drafts = drafts.filter(d => d.id !== draftId);
                uni.setStorageSync('activity_drafts', drafts);
            } catch (e) { console.error('Failed to delete draft after publish:', e); }
        }
        // 跳转到活动详情或列表页
        uni.switchTab({ url: '/pages/index/index' });
    }, 1500);
}

function toggleSignType(value) {
    signType.value = value;
}

function toggleBookType(value) {
    bookType.value = value;
}

function toggleActivitySubType(value) {
    activitySubType.value = value;
}

// 监听页面返回事件，自动保存草稿
onBackPress((options) => {
    if (options.from === 'navigateBack') {
        return false; // 如果是 uni.navigateBack() 主动返回，则不拦截
    }
    saveDraft(false); // 静默保存
    return false; // 不阻止默认返回行为
});

// 页面卸载时自动保存草稿
onUnload(() => {
    saveDraft(false); // 静默保存
});

</script>

<style lang="scss">
// --- ROUNDED & LIVELY REDESIGN V2 ---

// 颜色变量定义
$primary-color: #FF6B6B; // 更柔和、活泼的红色
$primary-light: #FFE2E2;
$text-primary: #333333;
$text-secondary: #555555;
$text-hint: #AAAAAA;
$border-color: #F0F0F0;
$background-color: #F7F8FA;
$card-color: #FFFFFF;
$input-bg-color: #F7F8FA;
$shadow: 0 10rpx 30rpx -10rpx rgba(100, 100, 100, 0.1);
$transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
$radius-card: 24rpx;
$radius-element: 16rpx;
$content-max-width: 750rpx; // 内容最大宽度

// 动画定义
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15rpx);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

// 全局容器
.edit-activity-container {
    background-color: $background-color;
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center; // 水平居中
}

// 顶部区域
.edit-header {
    padding: 30rpx 40rpx;
    background-color: $card-color;
    width: 100%;
    box-sizing: border-box;

    .edit-title {
        font-size: 48rpx;
        font-weight: 700;
        color: $text-primary;
        margin-bottom: 8rpx;
    }

    .edit-subtitle {
        font-size: 28rpx;
        color: $text-secondary;
    }
}

// Tab 切换
.edit-tabs {
    display: flex;
    background-color: $card-color;
    padding: 10rpx 40rpx;
    border-bottom: 1px solid $border-color;
    width: 100%;
    box-sizing: border-box;

    .edit-tab-item {
        flex: 1;
        padding: 24rpx 0;
        text-align: center;
        font-size: 28rpx;
        color: $text-secondary;
        font-weight: 500;
        transition: $transition;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12rpx;

        &.active {
            color: $primary-color;
            font-weight: 600;

            &::after {
                content: '';
                position: absolute;
                bottom: 8rpx;
                left: 50%;
                transform: translateX(-50%);
                width: 50rpx;
                height: 6rpx;
                background-color: $primary-color;
                border-radius: 3rpx;
            }
        }
    }
}

// 内容滚动区
.edit-content-scroll {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 30rpx 0; // 移除水平内边距，由内部卡片控制
    padding-bottom: 200rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tab-content-wrapper {
    animation: fadeIn 0.4s ease-in-out forwards;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

// 区块: 回归柔和卡片
.edit-section {
    background-color: $card-color;
    border-radius: $radius-card;
    margin-bottom: 30rpx;
    padding: 10rpx 30rpx;
    box-shadow: $shadow;
    border: 1px solid $border-color;
    width: calc(100% - 80rpx); // 两侧各留40rpx的间距
    max-width: $content-max-width;
    box-sizing: border-box;
}

.edit-section-title {
    display: flex;
    align-items: center;
    padding: 30rpx 0;
    font-size: 30rpx;
    font-weight: 600;
    color: $text-primary;
    border-bottom: 1px solid $border-color;
    margin-bottom: 10rpx;
    gap: 16rpx;
}

// 表单项
.edit-form-item {
    padding: 30rpx 0;
    border-bottom: 1px solid $border-color;

    &:last-child {
        border-bottom: none;
    }
}

.edit-form-label {
    display: block;
    font-size: 28rpx;
    font-weight: 500;
    color: $text-primary;
    margin-bottom: 20rpx;
}

// 输入框: 圆角、柔和
.edit-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    transition: $transition;
    background-color: $input-bg-color;
    border-radius: $radius-element;
    border: 1px solid $input-bg-color;

    .edit-input-icon {
        margin-right: 16rpx;
    }

    &:focus-within {
        background-color: $card-color;
        border-color: $primary-color;
    }
}

.edit-input {
    flex: 1;
    width: 100%;

    ::v-deep .uni-easyinput__content,
    ::v-deep .uni-easyinput__content-input {
        background-color: transparent !important;
        border: none !important;
        padding: 0 !important;
    }

    ::v-deep .uni-easyinput__content-input {
        height: 88rpx !important;
        font-size: 28rpx !important;
        color: $text-primary !important;
    }
}

.edit-datetime {
    flex: 1;

    ::v-deep .uni-date-x--border {
        border: none !important;
    }

    ::v-deep .uni-date-x {
        background-color: transparent !important;
        height: 88rpx;
        line-height: 88rpx;
        font-size: 28rpx;
        color: $text-primary;
        padding: 0 !important;
    }
}

// 文本域
.edit-textarea-wrapper {
    background-color: $input-bg-color;
    border-radius: $radius-element;
    padding: 24rpx;
    transition: $transition;
    border: 1px solid $input-bg-color;

    &:focus-within {
        border-color: $primary-color;
        background-color: $card-color;
    }
}

.edit-textarea {
    width: 100%;

    ::v-deep .uni-easyinput__content,
    ::v-deep .uni-easyinput__content-textarea {
        background-color: transparent !important;
        border: none !important;
        padding: 0 !important;
    }

    ::v-deep .uni-easyinput__content-textarea {
        min-height: 180rpx;
        font-size: 28rpx !important;
        line-height: 1.6 !important;
        color: $text-primary !important;
    }
}

// 选项卡式切换 (签到)
.edit-switch-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20rpx;

    .edit-tab {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20rpx;
        border-radius: $radius-element;
        font-size: 28rpx;
        transition: $transition;

        // Inactive state
        background-color: $card-color;
        border: 1px solid $border-color;
        color: $text-secondary;

        &.active {
            background-color: $primary-color;
            color: white;
            font-weight: 600;
            border-color: $primary-color;
        }
    }
}

// 标签组
.edit-tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;

    .edit-tag {
        padding: 16rpx 30rpx;
        background-color: $input-bg-color;
        font-size: 26rpx;
        color: $text-secondary;
        transition: $transition;
        border-radius: 999rpx;
        border: 1px solid $border-color;

        &.active {
            background-color: $primary-color;
            color: white;
            border-color: $primary-color;
            font-weight: 500;
        }
    }
}

// 数量选择器
.edit-counter {
    display: flex;
    align-items: center;
    gap: 4rpx;

    .counter-value {
        font-size: 32rpx;
        font-weight: 600;
        color: $text-primary;
        min-width: 100rpx;
        text-align: center;
    }

    .counter-btn {
        width: 70rpx;
        height: 70rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: $card-color;
        border: 1px solid #DCDFE6;
        border-radius: 50%;
        transition: $transition;

        &:active {
            background-color: #e0e0e0;
        }
    }
}

// 图片上传
.edit-image-picker,
.edit-qrcode-picker {
    ::v-deep .uni-file-picker__header {
        display: none;
    }

    ::v-deep .uni-file-picker__container {
        border-radius: $radius-element;
    }
}

.edit-upload-placeholder,
.edit-qrcode-placeholder {
    width: 100%;
    background-color: $input-bg-color;
    border-radius: $radius-element;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px dashed #DCDFE6;
    transition: $transition;
    gap: 16rpx;

    &:hover {
        border-color: $primary-color;
    }
}

.edit-upload-placeholder {
    height: 350rpx;

    .upload-text {
        font-size: 30rpx;
    }

    .upload-hint {
        font-size: 24rpx;
        color: $text-hint;
    }
}

.edit-qrcode-placeholder {
    width: 200rpx;
    height: 200rpx;

    .qrcode-text {
        font-size: 24rpx;
    }
}


// 提示文本
.edit-form-tip {
    font-size: 24rpx;
    color: $text-hint;
    margin-top: 20rpx;
    display: block;
}

// 底部操作栏
.edit-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-top: 1px solid $border-color;
    display: flex;
    z-index: 100;
    padding: 20rpx 40rpx;
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
    gap: 20rpx;
    justify-content: center;
}

// 按钮
.edit-btn {
    flex: 1;
    height: 90rpx;
    border-radius: 999rpx;
    font-size: 30rpx;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: $transition;
    border: none;
    gap: 12rpx;
    box-shadow: 0 5rpx 10rpx rgba($primary-color, 0.2);
    max-width: 340rpx; // 限制按钮最大宽度

    &.draft-btn {
        background-color: $primary-light;
        color: $primary-color;
        box-shadow: none;
        border: 1px solid $primary-color;
    }

    &.publish-btn {
        background-color: $primary-color;
        color: white;
    }

    &:active {
        transform: scale(0.97);
        filter: brightness(0.95);
    }
}

// 底部留白
.edit-bottom-space {
    height: 200rpx;
}

// 响应式适配
@media screen and (max-width: 768px) {
    .edit-section {
        width: calc(100% - 60rpx); // 两侧各留30rpx的间距
    }

    .edit-header .edit-title {
        font-size: 44rpx;
    }

    .edit-action-bar {
        padding-left: 30rpx;
        padding-right: 30rpx;
    }
}
</style>